<%--
  Created by IntelliJ IDEA.
  User: pc
  Date: 2020/11/12
  Time: 16:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>
<%--form表单--%>

<%--一个完整的form表单--%>
    <div id="addGustForm">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                    <label class="layui-form-label">设施名字</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required placeholder="请输入设施的名字" autocomplete="off" class="layui-input">
                    </div>
            </div>


            <div class="layui-form-item">
                    <label class="layui-form-label">设施总数</label>
                    <div class="layui-input-block">
                        <input type="text" name="count" required placeholder="请输入设施的数量" autocomplete="off" class="layui-input">
                    </div>
             </div>

            <div class="layui-form-item">
                <label class="layui-form-label">设施类型</label>
                <div class="layui-input-block">
                    <input type="text" name="typeid" required placeholder="请输入设施的类型" autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">设施定价</label>
                <div class="layui-input-block">
                    <input type="text" name="pmoney" required placeholder="请输入设施的定价" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">供应商</label>
                <div class="layui-input-block">
                    <input type="text" name="gys" required placeholder="请输入供应商" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                </div>
            </div>
        </form>
    </div>








<%--        layui的表格--%>
        <table class="layui-hide" id="test" lay-filter="test"></table>

        <%--layui 左上三个提交按钮--%>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData" id="xz">新增</button>
        </div>
    </script>


        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>



        <script>


            layui.use(['table','layer','form','jquery'], function(){
                var table = layui.table;
                var layer=layui.layer;
                var $=layui.jquery;
                var form=layui.form;


                $("#addGustForm").hide();
                $("#updGustForm").hide();





                table.render({
                    //获取id为test的表格
                    elem: '#test'
                    ,url:'${pageContext.request.contextPath}/sheshi'
                    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                    ,title: '用户数据表'
                    ,cols: [[
                        {field:'id', title:'ID', fixed: 'left', sort: true}
                        ,{field:'name', title:'设施名称', edit: 'text'}
                        ,{field:'count', title:'数量', sort: true}
                        ,{field:'typeid', title:'类型', sort: true}
                        ,{field:'pmoney', title:'定价', sort: true}
                        ,{field:'gys', title:'供应商', sort: true}
                        ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
                    ]]
                    ,page: true
                });

                //表头监听器
                table.on('toolbar(test)',function (obj) {
                    layer.open({
                        title:'添加角色'
                        ,type:1
                        ,area:['800px','400px']
                        ,offset:'50px'
                        ,content:$("#addGustForm")
                    });
                    form.on('submit(formDemo)', function(data){
                        //layer.msg(JSON.stringify(data.field));
                        //1.将获取到到的数据保存到数据库
                        $.ajax({
                            url:"${pageContext.request.contextPath}/sheshi?method=add",
                            data:data.field,
                            // data:data.field,  //当前表单里面填写的数据{name:'',name1:''}
                            type:"post",

                            success:function(r){
                                layer.closeAll();
                                //刷新一下table
                                table.reload('test',{
                                    page:{
                                        curr:1
                                    }
                                })

                            $("#xz").reload();
                            },error:function(msg){
                                alert("服务器错误")
                            }

                        })
                        //刷新表单
                        $("#formDemo")[0].reset();
                        return false;
                    });

                });



                //监听行工具事件
                table.on('tool(test)', function(obj){
                    var data = obj.data;
                    //console.log(obj)
                    if(obj.event === 'del'){
                        layer.confirm('真的删除行么', function(index){
                           // obj.del();
                            window.location.href="${pageContext.request.contextPath}/sheshi?method=del&gid="+data.id;
                            layer.close(index);
                        });
                    } else if(obj.event === 'edit'){
                        form.val("modify",{
                            "id":data.id,
                            "name":data.name,

                        });
                        layer.open({
                            title: '修改信息'
                            ,type:1
                            ,area: ['800px', '400px']
                            ,offset: '50px'
                            ,content:$("#updGustForm")
                        });
                        form.on('submit(formDemo)', function(data){
                            //layer.msg(JSON.stringify(data.field));
                            //1.将获取到到的数据保存到数据库
                            $.ajax({
                                url:"${pageContext.request.contextPath}/sheshi?method=add",
                                data:data.field,  //当前表单里面填写的数据{name:'',name1:''}
                                type:"post",

                                success:function(r){
                                    layer.closeAll();
                                    //刷新一下table
                                    table.reload('test',{
                                        page:{
                                            curr:1
                                        }
                                    })

                                },error:function(msg){
                                    alert("服务器错误")
                                }

                            })

                            return false;
                        });



                    }
                });



            });


        </script>


</body>
</html>
